﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>waitMe</title>
<style>
* {margin:0;font-family:Roboto,sans-serif;outline:0;box-sizing:border-box;font-size:14px}
body {background:#f1f1f1}
#page {margin:30px auto 100px;width:40%;min-width:800px;min-height:500px}
#page_content {background:#fff;box-shadow:0 1px 5px #ccc;margin-top:20px}
#pageCaption {font-size:24px;font-weight:500;line-height:24px}
#pageDesc {color:#777;margin-top:5px;font-size:90%}

#copyrightBlock {float:right}
#version, #gitHubLink, #downloadLink {color:#fff;background:#4081BE;display:inline-block;padding:0 10px;border-radius:3px;text-decoration:none;font-size:12px;line-height:24px;margin-left:1px}
#downloadLink:hover {background:#3772A8}
#gitHubLink {background:#ccc;color:#555;font-weight:500}
#gitHubLink:hover {background:#aaa;color:#333}
#version {background:transparent;color:#555;font-weight:500}
#version span {margin-left:10px;color:#999;font-size:12px}

.exampleContainer {}
.exampleContainer .exampleLive {border-top:1px solid #ddd;padding:20px;background:#fafafa}
.exampleContainer .exampleLive .exampleLiveTitle {color:#666;font-size:13px;padding-bottom:10px}
.exampleContainer .exampleLive > button {padding:6px 12px;cursor:pointer;background:#4081BE;border:0;color:#fff;border-radius:3px;text-transform:uppercase;font-weight:bold;font-size:13px;line-height:20px}
.exampleContainer .exampleLive > button:hover {background:#3772A8}
.exampleContainer .exampleCode {background:#2b2f3b;padding:20px}
.exampleContainer .exampleCode pre {line-height:0}
.exampleContainer .exampleCode code {white-space:pre-line}
.exampleContainer .exampleCode code * {font-family:consolas;font-size:13px}
.exampleContainer .exampleCode code > p {line-height:20px;color:#7993ad;display:inline-block}
.exampleContainer .exampleCode code .tab {padding-left:15px}
.exampleContainer .exampleCode code .tab2 {padding-left:30px}
.exampleContainer .exampleCode code .tab3 {padding-left:45px}
.exampleContainer .exampleCode code .tag {color:#97e0e9}
.exampleContainer .exampleCode code .text {color:#fff}
.exampleContainer .exampleCode code .key {color:#bf5c5b}
.exampleContainer .exampleCode code .val {color:#fadf8c}
.exampleContainer .exampleCode code .var {color:#aae997}
.exampleContainer .exampleCode code .var2 {color:#b297e9}

/* btn */
.btn {display:inline-block;cursor:pointer;background:#fff;border:1px solid #bbb;height:34px;padding:6px 12px;font-size:14px;line-height:18px}
.btn.btn-default {}
.btn.btn-default:hover {background:#eee;border-color:#bbb}
.btn.btn-default:focus {background:#ddd;border-color:#bbb}
.btn.btn-primary {background-color:#007ec4;border-color:#005A8C;color:#fff}
.btn.btn-primary:hover {background-color:#158CCF;border-color:#005A8C}
.btn.btn-primary:focus {background-color:#005A8C;border-color:#005A8C}
.btn.btn-default[disabled] {background:#fafafa!important;border-color:#ccc!important;color:#aaa}
.btn.btn-primary[disabled] {background:#3F9DD0!important;border-color:#537FA9!important;color:#ACD3E8;box-shadow:none!important}

.btn.btn-left {float:left;margin:0 5px 0 0!important}

.containerBlock {padding:30px}
.containerBlock form {margin:0 25%;text-align:center;padding:30px;background:#fafafa;border:1px solid #ddd}
.containerBlock form * {font-size:14px}
.containerBlock form > label {display:block;padding-bottom:5px;text-align:left}
.containerBlock form > input {width:100%;padding:6px 12px;margin-bottom:15px;box-sizing:border-box;-moz-box-sizing:border-box}
.containerBlock form > button {margin-top:15px}
.controlContainer {padding-top:50px;text-align:center}
.controlContainer div {padding-bottom:10px}
.controlContainer select {padding:6px 12px;height:34px}
.controlContainer select + button {margin-left:20px}

@media (max-width: 840px){
#page {width:auto;min-width:0;margin:20px 20px 100px}
}

@media (max-width: 400px){
.containerBlock form {margin:0}
}

</style>
<link type="text/css" rel="stylesheet" href="waitMe.css">
</head>
<body>

<div id="page">

	<div id="page_content">
	
		<div class="containerBlock">
		
			<form>
				<label>Name</label>
				<input type="text">
				<label>Email</label>
				<input type="text">
				<label>Phone</label>
				<input type="text">
				<button type="button" class="btn btn-primary" id="waitMe_ex">Submit</button>
			</form>
			
			<div class="controlContainer">
				<div>To start click Submit button</div>
				Effect
				<select id="waitMe_ex_effect">
					<option>none</option>
					<option selected>bounce</option>
					<option>rotateplane</option>
					<option>stretch</option>
					<option>orbit</option>
					<option>roundBounce</option>
					<option>win8</option>
					<option>win8_linear</option>
					<option>ios</option>
					<option>facebook</option>
					<option>rotation</option>
					<option>timer</option>
					<option>pulse</option>
					<option>progressBar</option>
					<option>bouncePulse</option>
					<option>img</option>
				</select>
				<button class="btn" id="waitMe_ex_close">STOP</button>
			</div>
		
		</div>
		
		<div class="exampleContainer">
			<div class="exampleCode"><pre><code>
				<p><span class="text">$('</span><span class="tag">#container</span><span class="text">').waitMe(</span>{</p>
				<p class="tab"><span class="key">effect</span> : <span class="val">'bounce'</span>,</p>
				<p class="tab"><span class="key">text</span> : <span class="val">''</span>,</p>
				<p class="tab"><span class="key">bg</span> : <span class="val">rgba(255,255,255,0.7)</span>,</p>
				<p class="tab"><span class="key">color</span> : <span class="val">#000</span>,</p>
				<p class="tab"><span class="key">sizeW</span> : <span class="val">''</span>,</p>
				<p class="tab"><span class="key">sizeH</span> : <span class="val">''</span>,</p>
				<p class="tab"><span class="key">source</span> : <span class="val">''</span></p>
				<p>}<span class="text">)</span>;</p>
			</code></pre></div>
		</div>
		
		<div class="containerBlock">
			<div class="controlContainer">
				<div>Animation during the initial page load</div>
				Effect
				<select id="waitMe_ex_body_effect">
					<option selected>progress</option>
					<option>working</option>
					<option>img</option>
					<option>text</option>
				</select>
				<button class="btn btn-primary" id="waitMe_ex_body">EXAMPLE</button>
			</div>
		
		</div>
		
		<div class="exampleContainer">
			<div class="exampleCode"><pre><code>
				<p>&lt;<span class="tag">body</span> <span class="key">class</span>=<span class="val">"waitMe_body"</span>&gt;</p>
				<p class="tab">&lt;<span class="tag">div</span> <span class="key">class</span>=<span class="val">"waitMe_container progress"</span> <span class="key">style</span>=<span class="val">"background:#fff"</span>&gt;</p>
				<p class="tab2">&lt;<span class="tag">div</span> <span class="key">style</span>=<span class="val">"background:#000"</span>&gt;&lt;/<span class="tag">div</span>&gt;</p>
				<p class="tab">&lt;/<span class="tag">div</span>&gt;</p>
				<p>&lt;/<span class="tag">body</span>&gt;</p>
			</code></pre></div>
		</div>

	</div>
		
</div>

<script src="http://cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script>
<script src="waitMe.js"></script>

<script>
$(function(){

	var current_effect = $('#waitMe_ex_effect').val();

	$('#waitMe_ex').click(function(){
		run_waitMe(current_effect);
	});
	$('#waitMe_ex_close').click(function(){
		$('.containerBlock > form').waitMe('hide');
	});

	$('#waitMe_ex_effect').change(function(){
		current_effect = $(this).val();
		run_waitMe(current_effect);
	});
	
	$('#waitMe_ex_effect').click(function(){
		current_effect = $(this).val();
	});
	
	function run_waitMe(effect){
		$('.containerBlock > form').waitMe({
			effect: effect,
			text: 'Please wait...',
			bg: 'rgba(255,255,255,0.7)',
			color:'#000',
			sizeW:'',
			sizeH:'',
			source: 'img.svg'
		});
	}
	
	
	var current_body_effect = $('#waitMe_ex_body_effect').val();
	
	$('#waitMe_ex_body').click(function(){
		run_waitMe_body(current_body_effect);
	});
	
	$('#waitMe_ex_body_effect').change(function(){
		current_body_effect = $(this).val();
		run_waitMe_body(current_body_effect);
	});
	
	function run_waitMe_body(effect){
		$('body').addClass('waitMe_body');
		var img = '';
		var text = '';
		if(effect == 'img'){
			img = 'background:url(\'img.svg\')';
		} else if(effect == 'text'){
			text = 'Loading...'; 
		}
		var elem = $('<div class="waitMe_container ' + effect + '"><div style="' + img + '">' + text + '</div></div>');
		$('body').prepend(elem);
		
		setTimeout(function(){
			$('body.waitMe_body').addClass('hideMe');
			setTimeout(function(){
				$('body.waitMe_body').find('.waitMe_container:not([data-waitme_id])').remove();
				$('body.waitMe_body').removeClass('waitMe_body hideMe');
			},200);
		},4000);
	}
	
});
</script>

</body>
</html>
